<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>一个神奇的网页</title>
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="./css/start.css" />

	<link rel="stylesheet" type="text/css" href="./css/cake.css" />

	<link rel="stylesheet" type="text/css" href="./css/photos.css" />

	<link rel="stylesheet" type="text/css" href="./css/wish.css" />

	<link rel="stylesheet" type="text/css" href="./css/end.css" />

	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		}

		.wrap-start {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.wrap-cake {
			position: absolute;
			width: 100%;
			height: 100%;
			background: #970af1;

			display: none;
		}

		.wrap-photos {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #eee;


			display: none;
		}
		.cake-text{
			color: #f8e54a;
		}
		.pic1,.pic2,.pic3,.pic4,.pic5,.pic6,.pic7,.pic8,.pic9,.pic10{
			width: 40%;
		}
	</style>

</head>

<body>

	<!-- -------------------开始页面-------------------------- -->
	<div class="wrap-start">
		<nav class="nav">
			<div class="nav-content">
				<ul class="nav-items">
					<li class="nav-item"> <span class="item-text">邢仙女生日：</span> </li>
					<li class="nav-item"> <span class="item-text"> <span id="day"> </span> </span> </li>
					<li class="nav-item"> <span class="item-text"> <span id="hour"></span> </span> </li>
					<li class="nav-item"> <span class="item-text"> <span id="min"></span> </span> </li>
					<li class="nav-item"> <span class="item-text"> <span id="sec"></span> </span> </li>
				</ul>
			</div>
			<label class="nav-btn" id="navBtn">
				<span class="btnRail"></span>
				<span class="btnRail"></span>
			</label>
		</nav>
	</div>

	<!-- -------------------相片页面-------------------------- -->
	<div class="wrap-photos">
		<div class="container">
			<img src="./img/pic1.jpg" class="pic1" />
			<img src="./img/pic2.jpg" class="pic2" />
			<img src="./img/pic3.jpg" class="pic3" />
			<img src="./img/pic4.jpg" class="pic4" />
			<img src="./img/pic5.jpg" class="pic5" />
			<img src="./img/pic6.jpg" class="pic6" />
			<img src="./img/pic7.jpg" class="pic7" />
			<img src="./img/pic8.jpg" class="pic8" />
			<img src="./img/pic9.jpg" class="pic9" />
			<img src="./img/Fairy.jpg" class="pic10" />
		</div>

	</div>
	<script src="./js/photos.js" type="text/javascript" charset="utf-8"></script>

	<!-- -------------------cake页面-------------------------- -->
	<div class="wrap-cake">
		<div class="cake">
			<div class="cake-floor"><img src="./img/cake-floor.png"></div>
			<div class="cake-foot"><img src="./img/cake-foot.png"></div>
			<div class="cake-candle"><img src="./img/cake-candle.png"></div>
			<div class="candle-fire"></div>
			<div class="cake-text">
				<h1>happy birthday!</h1>
				<span>生日快乐</span>
			</div>
		</div>

		<div class="wish" id="endBtn">
			<span>🎉</span><span>🎉</span><span>🎉</span><span style="color: #f8e54a">许个愿吧</span>
		</div>
	</div>


	<!-- -------------------end页面-------------------------- -->
	<!-- <div class="wrap-end"></div> -->


	<!-- -------------------音频页面-------------------------- -->
	<audio  loop="loop" preload="auto" id="audioBir">
		<source src="./happybirthday.mp3" type="audio/mpeg">
	</audio>

	<script>
		///////////////////////////// 设置生日倒数时间 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
		var t = "2024/12/06,00:00:00"
	</script>


	<!------------------------------ 开始页面js 开始 -->
	<script src="./js/start.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var endBtn = document.getElementById("endBtn");
		endBtn.onclick = function () {
			wrapCake.style.display = "none";
			endFun();
		}
	</script>

	<!------------------------------ end页面js 开始 -->
	<script src="./js/end.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>
